<template>
  <view class="appointment-container">
    <!-- 顶部标题 -->
    <view class="title">预约挂号</view>

    <!-- 主体内容：左侧分类 + 右侧列表 -->
    <view class="main">
      <!-- 左侧科室分类 -->
      <scroll-view 
        class="left" 
        scroll-y="true"
        :scroll-with-animation="true"
        :scroll-top="leftScrollTop"
      >
        <view
          v-for="(category, catIndex) in categories"
          :key="catIndex"
          class="category-item"
          :class="{ active: activeCategory === catIndex }"
          @click="onCategoryClick(catIndex)"
        >
          {{ category }}
        </view>
      </scroll-view>

      <!-- 右侧门诊列表 -->
      <scroll-view 
        class="right" 
        scroll-y="true"
        @scroll="onRightScroll"
        :scroll-into-view="scrollToView"
        :scroll-with-animation="true"
      >
        <view class="right-content">
          <view 
            v-for="(category, catIndex) in categories" 
            :key="catIndex"
            :id="'category-' + catIndex"
            class="category-content"
          >
            <view class="category-title">{{ category }}</view>
            
            <view
              v-for="(clinic, clinicIndex) in getClinicsByCategory(catIndex)"
              :key="clinicIndex"
              class="clinic-item"
              @click="navigateToAppointment(category, clinic)"
            >
              <view class="clinic-name">{{ clinic.name }}</view>
              <view class="clinic-info">
                <text class="status" :class="clinic.available ? 'available' : 'unavailable'">
                  {{ clinic.available ? '可预约' : '已满' }}
                </text>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      categories: [
        "儿科", "消化科", "产科", "皮肤科", 
        "儿科", "消化科", "产科", "皮肤科",
        "儿科", "消化科", "产科", "皮肤科",
        "儿科", "消化科", "产科"
      ],
      activeCategory: 0,
      leftScrollTop: 0,
      categoryPositions: [],
      categoryItemHeight: 54,
      scrollToView: ''
    };
  },
  onReady() {
    setTimeout(() => {
      this.calculateCategoryPositions();
    }, 300);
    uni.onWindowResize(() => this.calculateCategoryPositions());
  },
  onUnload() {
    uni.offWindowResize();
  },
  methods: {
    getClinicsByCategory(index) {
      // 门诊数据（实际项目从接口获取）
      const clinics = {
        0: [
          { name: "新生儿随访门诊", doctorCount: 8, available: true, id: "1" }
          
        ],
        1: [
          { name: "消化内科门诊", doctorCount: 12, available: true, id: "2" }
          
        ],
        2: [
          { name: "产科门诊", doctorCount: 15, available: true, id: "3" }
        
        ],
        6: [
          { name: "妇科门诊", doctorCount: 10, available: true, id: "4" }
          
        ]
      };
      // 为默认门诊添加ID，确保数据完整性
      return clinics[index] || [
        { name: `${this.categories[index]}普通门诊`, doctorCount: 5, available: true, id: `clinic-${index}-0` }
      ];
    },
    
    calculateCategoryPositions() {
      const query = uni.createSelectorQuery().in(this);
      this.categoryPositions = [];
      this.categories.forEach((_, index) => {
        query.select(`#category-${index}`).boundingClientRect(data => {
          if (data) this.categoryPositions[index] = { top: data.top, bottom: data.bottom };
        }).exec();
      });
    },
    
    onCategoryClick(index) {
      this.activeCategory = index;
      this.leftScrollTop = index * this.categoryItemHeight - (3 * this.categoryItemHeight / 2);
      this.scrollToView = '';
      this.$nextTick(() => this.scrollToView = `category-${index}`);
    },
    
    onRightScroll(e) {
      const scrollTop = e.detail.scrollTop + 50;
      for (let i = 0; i < this.categoryPositions.length; i++) {
        const pos = this.categoryPositions[i];
        if (pos && scrollTop >= pos.top && scrollTop < pos.bottom && this.activeCategory !== i) {
          this.activeCategory = i;
          this.leftScrollTop = i * this.categoryItemHeight - (3 * this.categoryItemHeight / 2);
          break;
        }
      }
    },
    
    // 核心：跳转至详情页，传递完整参数
    navigateToAppointment(category, clinic) {
      if (!clinic.available) {
        uni.showToast({ title: '该门诊已约满', icon: 'none', duration: 2000 });
        return;
      }
      // 传递参数时确保中文和特殊字符正确编码
      uni.navigateTo({
        url: `detail?clinic=${encodeURIComponent(JSON.stringify(clinic))}`
      });
    }
  }
};
</script>

<style scoped>
/* 保持原样式不变 */
.appointment-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #fff;
}
.title {
  font-size: 20px;
  font-weight: bold;
  padding: 16px;
  border-bottom: 1px solid #f5f5f5;
  background-color: #fafafa;
}
.main {
  display: flex;
  flex: 1;
  overflow: hidden;
}
.left {
  width: 25%;
  height: 100%;
  background-color: #fafafa;
  border-right: 1px solid #eee;
  box-sizing: border-box;
}
.category-item {
  padding: 16px 10px;
  text-align: center;
  font-size: 14px;
  border-bottom: 1px solid #eee;
  height: 54px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
}
.category-item.active {
  background-color: #fff;
  font-weight: bold;
  color: #1677ff;
  border-left: 3px solid #1677ff;
}
.right {
  flex: 1;
  height: 100%;
  background-color: #fff;
}
.right-content {
  padding: 10px 15px;
}
.category-content {
  margin-bottom: 25px;
  padding-top: 10px;
}
.category-title {
  font-size: 16px;
  font-weight: bold;
  margin: 10px 0 15px;
  color: #1a1a1a;
  padding-left: 5px;
  border-left: 3px solid #1677ff;
}
.clinic-item {
  padding: 15px;
  margin-bottom: 10px;
  background-color: #f9f9f9;
  border-radius: 8px;
  border: 1px solid #f0f0f0;
}
.clinic-name {
  font-size: 15px;
  margin-bottom: 8px;
  color: #333;
}
.clinic-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}
.doctor-count {
  color: #666;
}
.status {
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
}
.status.available {
  color: #00b42a;
  background-color: #eafaf1;
}
.status.unavailable {
  color: #f53f3f;
  background-color: #fef2f2;
}
</style>